<template>
    <!-- 主要导航栏 -->
    <div
        class="flex bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 shadow-sm fixed w-full h-16 z-50">
        <div class="flex-1 hidden md:flex"></div>

        <div class="flex-[6] max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧品牌标识 -->
                <div class="flex items-center">
                    <router-link to="/" class="flex items-center space-x-2">
                        <svg t="1749045728677" class="icon dark:fill-gray-400 fill-gray-800" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5232" width="30" height="30">
                            <path
                                d="M629.248 351.232H392.704c-15.872 0-28.16-12.8-28.16-28.16V86.528c0-15.872 12.8-28.16 28.16-28.16h236.544c15.872 0 28.16 12.8 28.16 28.16V322.56c0 15.872-12.8 28.672-28.16 28.672zM420.864 294.4h179.712V114.688H420.864v179.712zM629.248 966.144H392.704c-15.872 0-28.16-12.8-28.16-28.16V701.44c0-15.872 12.8-28.16 28.16-28.16h236.544c15.872 0 28.16 12.8 28.16 28.16v236.544c0 15.36-12.8 28.16-28.16 28.16z m-208.384-56.832h179.712v-179.712H420.864v179.712zM264.704 966.144H28.16c-15.872 0-28.16-12.8-28.16-28.16V701.44c0-15.872 12.8-28.16 28.16-28.16h236.544c15.872 0 28.16 12.8 28.16 28.16v236.544c0.512 15.36-12.288 28.16-28.16 28.16z m-207.872-56.832h179.712v-179.712H56.832v179.712zM995.84 966.144h-236.544c-15.872 0-28.16-12.8-28.16-28.16V701.44c0-15.872 12.8-28.16 28.16-28.16h236.544c15.872 0 28.16 12.8 28.16 28.16v236.544c0 15.36-12.8 28.16-28.16 28.16z m-208.384-56.832h179.712v-179.712h-179.712v179.712z"
                                class="dark:fill-gray-400 fill-gray-800" p-id="5233"></path>
                            <path
                                d="M877.568 729.6c-15.872 0-28.16-12.8-28.16-28.16v-160.768H175.104V701.44c0 15.872-12.8 28.16-28.16 28.16s-28.16-12.8-28.16-28.16v-189.44c0-15.872 12.8-28.16 28.16-28.16h730.624c15.872 0 28.16 12.8 28.16 28.16v189.44c0 15.36-12.8 28.16-28.16 28.16z"
                                class="dark:fill-gray-400 fill-gray-800" p-id="5234"></path>
                            <path
                                d="M510.976 729.6c-15.872 0-28.16-12.8-28.16-28.16V322.56c0-15.872 12.8-28.16 28.16-28.16 15.872 0 28.16 12.8 28.16 28.16v378.88c0 15.36-12.8 28.16-28.16 28.16z"
                                class="dark:fill-gray-400 fill-gray-800" p-id="5235"></path>
                        </svg>
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-300">数据管理</span>
                    </router-link>
                </div>

                <!-- 中间导航链接 -->
                <div class="hidden md:flex items-center space-x-8">
                    <router-link to="/user/manageArticles"
                        class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-1 pt-1 text-sm font-medium transition-colors"
                        active-class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400">
                        文章管理
                    </router-link>
                    <router-link to="/user/manageDynamic"
                        class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-1 pt-1 text-sm font-medium transition-colors"
                        active-class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400">
                        动态管理
                    </router-link>
                    <!-- <router-link to="/articles/timeline"
                        class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-1 pt-1 text-sm font-medium transition-colors"
                        active-class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400">
                        评论管理
                    </router-link> -->

                </div>

                <!-- 右侧操作区 -->
                <div class="flex items-center space-x-4">

                    <!-- 暗色模式切换 -->
                    <button @click="themeStore.changeStatus()" key="dark-mode"
                        class=" scale-75 p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 items-center justify-center hidden md:flex">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor" v-if="themeStore.isDark">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>

                        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                    </button>

                    <!-- 移动端菜单按钮 -->
                    <div class="w-10 h-10 flex items-center justify-center hover:bg-slate-500 dark:hover:bg-gray-600 md:hidden"
                        @click="drawer = true">
                        <svg t="1746846489294" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="5889" width="30" height="30" class="icon text-gray-800 dark:text-gray-200">
                            <path
                                d="M405.2992 163.9424H225.28c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44h180.0192c33.8944 0 61.44-27.5456 61.44-61.44V225.3824c0-33.8944-27.5456-61.44-61.44-61.44zM405.2992 557.1584H225.28c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44h180.0192c33.8944 0 61.44-27.5456 61.44-61.44V618.5984c0-33.792-27.5456-61.44-61.44-61.44zM798.72 163.9424H618.7008c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44H798.72c33.8944 0 61.44-27.5456 61.44-61.44V225.3824c0-33.8944-27.5456-61.44-61.44-61.44zM798.72 557.1584H618.7008c-33.8944 0-61.44 27.5456-61.44 61.44v180.0192c0 33.8944 27.5456 61.44 61.44 61.44H798.72c33.8944 0 61.44-27.5456 61.44-61.44V618.5984c0-33.792-27.5456-61.44-61.44-61.44z"
                                p-id="5890"></path>
                        </svg>

                    </div>
                </div>
            </div>
        </div>

        <div class="flex-1 hidden md:flex justify-center items-center">
            <!-- 右侧头像及下拉 -->
            <div class="flex justify-center items-center">
                <el-dropdown>
                    <span class="flex  justify-center">
                        <el-avatar :size="40"
                            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.xzfpkJdhfQ8AEGsz6fxe2QAAAA?rs=1&pid=ImgDetMain" />
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="navigateTo('/user/seeting')">更改信息</el-dropdown-item>
                            <el-dropdown-item @click="navigateTo('/manage')">后台管理</el-dropdown-item>
                            <el-dropdown-item divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <span class="ml-2 mr-3 text-gray-500 dark:text-gray-300 font-medium">Cookies</span>
            </div>
        </div>
    </div>

    <!-- 抽屉菜单 -->
    <el-drawer direction='ltr' v-model="drawer" title="I am the title" :with-header="false" size="240"
        class="dark:bg-gray-800 dark:text-gray-200">
        <div class="flex justify-center items-center flex-col w-full dark:bg-gray-800">
            <div @click="navigateTo('/articles/home')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
                文章管理
            </div>
            <div @click="navigateTo('/articles/category')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
                动态管理
            </div>
            <div @click="navigateTo('/articles/timeline')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
                个人信息
            </div>
            <div @click="navigateTo('/articles/timeline')" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
                后台管理
            </div>
            <div @click="themeStore.changeStatus()" class="w-full p-4 bg-gray-100 dark:bg-gray-700 rounded-xl flex justify-center mt-2 
               text-gray-800 dark:text-gray-200">
                黑暗模式
            </div>
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { systemStatus } from '../../../ts/pinia';
let themeStore = systemStatus()
let router = useRouter()
let searchInput = ref('') //搜索框输入内容
const drawer = ref(false) //手机端左侧菜单

function navigateTo(path: string) {
    console.log(path);

    router.push(path)
    drawer.value = false
}

</script>

<style scoped></style>